
<!-- 这是商家订单 -->



















<template>
  <view class="ikz-bid">
    <ikz-loading :css-data="loading_css"></ikz-loading>
    <!-- ad -->
    <!-- list -->
    <view>
      <!-- <view class="ikz-sticky-box" id="ikz-sticky-box">
        <view
          class="ikz-sticky-title"
          v-for="(item, index) in type_list.list"
          :key="index"
        >
          <text
            class="ikz-textcenter"
            :class="{ active: current == index }"
            @click="change"
            :data-index="index"
            :data-id="item.id"
          >
            {{ item.server_name }}
          </text>
        </view> -->
        <!-- pages/Component/Module/Payment/Program/withdrawal/index/index -->
      </view>
      <view class="ikz-box">
        <view
          class="ikz-sticky-item"
          v-for="(item, index) in show_info.list"
          :key="index"
          @click="godetail(item)"
        >
          <view class="ikz-sticky-top">
            <view class="ikz-sticky-head">
              <image
                class="ikz-sticky-img"
                :src="'https://dexinhebei.com' + item.goods[0].image"
              ></image>
            </view>
            <view class="ikz-sticky-head-right">
              <view class="ikz-sticky-head-right-box">
                <view class="ikz-sticky-head-name">
                  订单号：{{ item.order_no }}
                </view>
              </view>
              <view class="ikz-sticky-head-right-box">
                <view class="ikz-sticky-head-card">
                  商品：{{ item.goods[0].name }}
                </view>
                <view class="ikz-sticky-head-price">
                  总价：￥{{ item.total_fee.toFixed(2) }}
                </view>
              </view>
            </view>
          </view>

          <view class="ikz-sticky-end">
            <view class="ikz-sticky-start">
              <view class="ikz-sticky-spot"></view>
              配送地址：
              <text v-if="item.address_data"
                >{{ item.address_data.group_name
                }}{{ item.address_data.detail }}</text
              >
            </view>
          </view>
          <view class="ikz-sticky-end">
            <view class="ikz-sticky-start">
              <view class="ikz-sticky-spot"></view>
              备注：
              <text v-if="item.remarks"
                >{{ item.remarks
                }}</text
              >
            </view>
          </view>

          <view class="ikz-sticky-buttom" v-if="item.status == 0">
            <view
              class="ikz-sticky-btn"
              @click.stop="pay(item.id, item.total_fee)"
            >
              待付款
            </view>
          </view>
          <view class="ikz-sticky-buttom" v-if="item.status == 1">
            <!-- <view class="ikz-sticky-btn4"> 待接单 </view> -->
            <view
              class="ikz-sticky-btn4"
              style="background: linear-gradient(135deg, #902a0c, #902a0c)"
              @click.stop="getRefund(1)"
            >
              待接单
            </view>
          </view>
          <view class="ikz-sticky-buttom" v-if="item.status == 2">
            <!-- <view class="ikz-sticky-btn4"> 已抢单 </view> -->
            <view
              class="ikz-sticky-btn4"
              style="background: linear-gradient(135deg, #510c90, #510c90)"
              @click.stop="getRefund(2)"
            >
              退款
            </view>
            <view
              class="ikz-sticky-btn4"
              style="background: linear-gradient(135deg, #ff9800, #ff9800)"
              @click.stop="getRefund(3)"
            >
              确认收货
            </view>
          </view>
          <!-- <view
            class="ikz-sticky-buttom"
            v-if="item.status == 2"
            @click="getRefund"
          >
            <view class="ikz-sticky-btn4"> 退款 </view>
          </view> -->
          <view class="ikz-sticky-buttom" v-if="item.status == 3">
            <view class="ikz-sticky-btn3"> 已完成 </view>
          </view>
          <view class="ikz-sticky-buttom" v-if="item.status == 4">
            <view class="ikz-sticky-btn3"> 已取消 </view>
          </view>
        </view>
      </view>
      <view class="ikz-more" v-if="load_more == 4"> ——我也是有底线的—— </view>
      <view class="ikz-more" v-if="load_more == 5">
        <image class="ikz-empty" src="/static/empty.png"></image>
      </view>
    </view>
    <!-- list -->
  </view>
</template>

<script>
import ikzLoading from "@/pages/Component/Public/Loading/loading.vue";
import ikzGlist from "@/pages/Component/Module/Campus/Public/Order/myorder/index.vue";
var app = getApp();
import ikz from "@/pages/Common/tools.js";
export default {
  components: {
    ikzLoading,
    ikzGlist,
  },
  data() {
    return {
      loading_css: {
        display: "flex",
      },
      status: "",
      show_info: {
        list: [],
      },
      type_list: {
        list: [
          {
            id: "",
            server_name: "全部",
          },
          {
            id: "0",
            server_name: "待付款",
          },
          {
            id: "1",
            server_name: "待接单",
          },
          {
            id: "2",
            server_name: "已抢单",
          },
          {
            id: "4",
            server_name: "已取消",
          },
          {
            id: "3",
            server_name: "已完成",
          },
        ],
      },
      page: 1,
      limit: 10,
      load_more: 2,
      type_index: "",
      current: 0,
      show_status: 2,
    };
  },
  onLoad(options) {
    this.status = options.status || "";
    if (this.status == "") {
      this.current = 0;
    } else if (this.status == 0) {
      this.current = 1;
    } else if (this.status == 1) {
      this.current = 2;
    } else if (this.status == 2) {
      this.current = 3;
    } else if (this.status == 3) {
      this.current = 5;
    } else if (this.status == 4) {
      this.current = 4;
    }
    this.orderList((res) => {
      this.loading_css.display = "none";
    });
  },
  onShow() {
    if (this.show_status == 2) {
      this.show_status = 3;
    } else {
      this.page = 1;
      this.orderList((res) => {
        this.loading_css.display = "none";
      });
    }
  },
  onPullDownRefresh() {
    this.page = 1;
    this.orderList((res) => {
      uni.stopPullDownRefresh();
    });
  },
  onReachBottom() {
    if (this.load_more == 2) {
      this.page++;
      this.load_more = 3;
      this.orderList((res) => {});
    }
  },
  methods: {
    // 退款
    getRefund(value) {
      uni.showModal({
        title: '提示',
        content: value == 1 ? "待接单" : value == 2 ? "退款" : "确认收货",
        success: (res) => {
          if (res.confirm) {
            uni.showModal({
              title: "提示",
              content:
                value == 1
                  ? "抢单操作只能在电脑端进行，是否前往电脑端？"
                  : value == 2
                  ? "退款操作只能在电脑端进行，是否前往电脑端？"
                  : "确认收货操作只能在电脑端进行，是否前往电脑端？",
              success: (res) => {
                if (res.confirm) {
                  // 跳转到电脑端页面
                  uni.navigateTo({
                    url: "/pages/Webview/index?path=https://dexinhebei.com/ZNqLOsRjSe.php/index/login",
                  });
                } else if (res.cancel) {
                  console.log("用户取消跳转");
                }
              },
            });
          } else if (res.cancel) {
            console.log("用户取消退款");
          }
        },
      });
    },
    //请求页面数据
    orderList(fn) {
      var path = "/xyb/supermarket/order/businessOrder";
      var data = {
        page: this.page,
        limit: this.limit,
        status: this.status,
      };
      ikz.post(path, data, (res) => {
        if (res.data.code) {
          console.log(res);
          var temp_list = res.data.data;
          if (this.page != 1) {
            for (var i = 0; i < temp_list.length; i++) {
              this.show_info.list.push(temp_list[i]);
            }
          } else {
            this.show_info.list = temp_list;
          }
          if (temp_list.length == this.limit) {
            this.load_more = 2;
          } else {
            if (this.page == 1) {
              if (temp_list.length == 0) {
                this.load_more = 5;
              } else {
                this.load_more = 4;
              }
            } else {
              this.load_more = 4;
            }
          }
          this.$forceUpdate();
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
        fn();
      });
    },
    godetail(item) {
      uni.navigateTo({
        url: `/pages/Component/merchant/order/details/index?id=${item.id}`,
      });
    },
    change: function (e) {
      this.current = e.currentTarget.dataset.index;
      this.status = e.currentTarget.dataset.id;
      this.page = 1;
      this.orderList((res) => {});
    },
    pay(id, total_fee) {
      // uni.navigateTo({
      //   url:
      //     "/pages/Component/Module/Payment/Program/pay/index/index?orderid=" +
      //     id +
      //     "&total_price=" +
      //     total_fee,
      // });
    },
    cancel(id, index) {
      var that = this;
      uni.showModal({
        title: "提示",
        content: "确定取消订单？",
        success: function (res) {
          if (res.confirm) {
            var path = "/xyb/order/cancel";
            var data = {
              orderid: id,
            };
            ikz.post(path, data, (res) => {
              if (res.data.code) {
                uni.showToast({
                  title: "取消成功",
                  duration: 2000,
                });
                that.show_info.list[index].status = 4;
                if (that.show_info.list.length == 0) {
                  that.load_more = 5;
                }
                that.$forceUpdate();
              } else {
                uni.showModal({
                  title: "提示",
                  content: res.data.msg,
                  showCancel: false,
                  success: function (res) {},
                });
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    confirm(id, index) {
      var that = this;
      uni.showModal({
        title: "提示",
        content: "确定订单已收货？",
        success: function (res) {
          if (res.confirm) {
            var path = "/xyb/order/confirm_complete";
            var data = {
              orderid: id,
            };
            uni.showLoading({
              title: "加载中",
            });
            ikz.post(path, data, (res) => {
              uni.hideLoading();
              if (res.data.code) {
                uni.showToast({
                  title: "收货成功",
                  duration: 2000,
                });
                that.show_info.list[index].status = 3;
                if (that.show_info.list.length == 0) {
                  that.load_more = 5;
                }
                that.$forceUpdate();
              } else {
                uni.showModal({
                  title: "提示",
                  content: res.data.msg,
                  showCancel: false,
                  success: function (res) {},
                });
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
};
</script>

<style scoped>
/* 基础布局 */
.ikz-bid {
  background: #f8f9fa;
  min-height: 100vh;
  padding: 20rpx;
  box-sizing: border-box;
}

/* 顶部导航 */
.ikz-sticky-box {
  display: flex;
  position: sticky;
  top: var(--window-top);
  z-index: 99;
  padding: 20rpx 0;
  background: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  white-space: nowrap;
  overflow-x: auto;
}

.ikz-sticky-title {
  flex: 1;
  text-align: center;
  padding: 0 20rpx;
}

.ikz-textcenter {
  display: inline-block;
  padding: 12rpx 24rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  color: #666;
  transition: all 0.3s ease;
  position: relative;
}

.ikz-textcenter.active {
  color: #fdaf66;
  font-weight: 500;
}

.ikz-textcenter.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10rpx;
  width: 40rpx;
  height: 4rpx;
  background: #fdaf66;
  transform: translateX(-50%);
  border-radius: 2rpx;
}

.ikz-textcenter:hover {
  background: rgba(253, 175, 102, 0.1);
}
/* 订单卡片 */
.ikz-box {
  margin-top: 20rpx;
}

.ikz-sticky-item {
  margin-bottom: 20rpx;
  padding: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
}

.ikz-sticky-top {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
}

/* 图片样式 */
.ikz-sticky-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 30rpx;
}

/* 右侧内容 */
.ikz-sticky-head-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ikz-sticky-head-right-box {
  margin-bottom: 20rpx;
}

.ikz-sticky-head-name {
  font-size: 28rpx; /* 从32rpx调整为28rpx */
  font-weight: 500;
  color: #333;
  margin-bottom: 12rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ikz-sticky-head-time {
  font-size: 24rpx; /* 从26rpx调整为24rpx */
  color: #999;
  margin-bottom: 12rpx;
}

//* 商品信息 */
.ikz-sticky-head-card {
  background: linear-gradient(135deg, #fdaf66, #ff8800);
  color: #fff;
  padding: 8rpx 20rpx;
  border-radius: 40rpx;
  font-size: 26rpx;
  display: inline-block;
  margin-right: 10rpx;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ikz-sticky-head-price {
  font-size: 28rpx; /* 从32rpx调整为28rpx */
  color: #ff6565;
  font-weight: 600;
  margin-top: 12rpx;
}

/* 商品数量 */
.ikz-sticky-start {
  padding: 20rpx 0;
  border-top: 1rpx solid #eee;
  font-size: 28rpx;
  color: #666;
  display: flex;
  align-items: center;
  position: relative;
  top: 20rpx;
}

.ikz-sticky-spot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: #76a8fd;
  margin-right: 16rpx;
}

/* 底部按钮区域 */
.ikz-sticky-buttom {
  padding: 20rpx 0 0;
  border-top: 1rpx solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  margin-top: 20rpx;
}

.ikz-sticky-btn,
.ikz-sticky-btn4,
.ikz-sticky-btn3 {
  padding: 12rpx 22rpx;
  border-radius: 40rpx;
  font-size: 27rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  outline: none;
  flex-shrink: 0;
}

.ikz-sticky-btn {
  background: linear-gradient(135deg, #ff6565, #d54242);
  color: #fff;
}

.ikz-sticky-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4rpx 8rpx rgba(255, 101, 101, 0.3);
}

.ikz-sticky-btn4 {
  background: linear-gradient(135deg, #42d5be, #009423);
  color: #fff;
}

.ikz-sticky-btn3 {
  background: #f5f5f5;
  color: #999;
}

/* 空状态 */
.ikz-more {
  padding: 60rpx 0;
  color: #ccc;
  font-size: 28rpx;
  text-align: center;
}

.ikz-empty {
  width: 200rpx;
  height: 200rpx;
  opacity: 0.6;
  margin: 100rpx 0;
  filter: grayscale(0.8);
}
</style>